<template>
  <div class="rated">
    <p class="title">最受好评电影</p>
    <div class="wrapper">
      <ul>
        <li
          v-for="item in ratedList"
          :key="item._id"
          @click="goToDetail(item._id)"
        >
          <div class="imgwrap">
            <img :src="item.imgUrl" alt="" />
            <div class="shadow">
              <p v-if="item.score">观众评分: {{ item.score }}</p>
              <p v-else>{{ item.wishNum }} 人想看</p>
            </div>
          </div>

          <h5>{{ item.title }}</h5>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入'better-scroll'
import BScroll from "better-scroll";

import { ratedApi } from "@/utils/api";
export default {
  data() {
    return {
      ratedList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // getData() {
    //   fetch("http://www.pudge.wang:3080/api/rated/list")
    //     .then((response) => response.json())
    //     .then((res) => {
    //       console.log(res);
    //       if (res.status === 0) {
    //         this.ratedList = res.result;
    //         // nextTick表示下一次的事件循环，当数据渲染结束再执行
    //         this.$nextTick(() => {
    //           // 在这里拿到数据以后加入插件
    //           new BScroll(".wrapper", {
    //             startX: 0,
    //             startY: 0,
    //             scrollX: true,
    //             scrollY: false,
    //             click: true,
    //           });
    //         });
    //       } else {
    //         alert(res.msg);
    //       }
    //     });
    // },
    async getData() {
      const res = await ratedApi();
      // console.log(res);
      if (res.status === 0) {
        this.ratedList = res.result;
        await this.$nextTick();
        new BScroll(".wrapper", {
          startX: 0,
          startY: 0,
          scrollX: true,
          scrollY: false,
          click: true,
        });
      } else {
        alert(res.msg);
      }
    },
    goToDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.rated {
  width: 100%;
  height: 200px;
  background: #fff;
  padding: 12px;
  margin-bottom: 10px;

  .title {
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
  }

  .wrapper {
    width: 100%;
    height: 145px;
    // overflow: auto;
    // 不用滚动条
    overflow: hidden;
  }

  ul {
    // width: 100%;
    height: 100%;
    // 变成一个有弹性盒效果的行内块元素
    display: inline-flex;

    li {
      width: 85px;
      margin-right: 10px;
      height: 100%;
      // 控制子元素是否压缩
      flex-shrink: 0;

      .imgwrap {
        width: 85px;
        height: 115px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        .shadow {
          width: 85px;
          height: 45px;
          position: absolute;
          bottom: 0;
          left: 0;
          background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.8),
            rgba(0, 0, 0, 0)
          );

          p {
            position: absolute;
            left: 4px;
            bottom: 2px;
            color: #faaf00;
            font-size: 11px;
            font-weight: 600;
          }
        }
      }

      h5 {
        font-size: 13px;
        color: #222;
        margin-bottom: 3px;
        width: 85px;
        margin-top: 10px;
        .ellipsis();
      }
    }
  }
}
</style>
